<!-- 【系统菜单】  -->

<template>
  <div class="contain">
    <!-- 左侧 一级菜单 -->
    <div class="aside">
      <li v-for="item in menuBox" :key="item.id" :class="menuItemIndex == item.id ? 'actionClass' : ''"
        @click="menuItemClick(item.id)">
        <i class="iconfont icon-caidan"></i>{{ item.name }}
      </li>
    </div>
    <!-- 右侧 二级菜单 -->
    <div class="main-box">
      <div class="menu-contain" v-for="item in rightMenuItem" :key="item.id">
        <div class="menu-header">{{ item.name }}</div>
        <div class="menu-box">
          <div v-for="item1 in item.items" :key="item1.id" class="small-box">
            <span @click="rightMenuClick(item1)" class="mouseActive">
              {{ item1.name }}
            </span>
            <div class="shoucangBox">
              <!-- 【收藏-按钮】如果没有点击收藏 -->
              <i class="iconfont icon-shoucang" v-if="!item1.collect" @click="shoucang(item1)"></i>
              <!-- 点击了收藏之后 -->
              <i v-else class="iconfont icon-shoucang1-copy" @click="shoucang(item1)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import menuJson from "../assets/js/menuJson"; // json目录
export default {
  data() {
    return {
      menuBox: [], // 存放所有的目录信息
      rightMenuItem: [], // 存放右侧目录信息(数据请求)
      menuItemIndex: 0, // 记录点击的二级目录，更改活跃样式
    };
  },
  created() {
    this.getMenuList(); //获取目录区域
  },
  methods: {
    // 获取左侧目录信息(一级)
    async getMenuList() {
      const {
        data: res
      } = await this.$http.get("/api/menuList");
      if (res.result) {
        this.menuBox = res.list;
      } else {
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    // 监听左侧目录的点击（获取右侧目录）
    async menuItemClick(id) {
      this.menuItemIndex = id;
      let orgId = JSON.parse(sessionStorage.getItem("orgData")).orgType;
      // 获取右边的目录区域
      let {
        data: res
      } = await this.$http.get("/api/menuItemsList", {
        params: {
          menuId: id,
          orgId
        },
      });
      if (res.result) {
        this.rightMenuItem = res.list;
      } else {
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },

    // 监听右侧目录的点击事件(打开该页面)
    rightMenuClick(path) {
      // console.log(path);
      // 避免地址重构,对数据进行互换一下。
      if (path.openType == 'null') {
        this.$message.error('提示！该模块处于开发中~');
        return
      }
      // if (this.$store.state.tabPathList.length <= 16) {
      this.$store.commit("eidtActionPath", JSON.parse(JSON.stringify(path)));
      // let i = this.$store.getters.tabPathListFindIndex(item1);   //【不可重复打开的相同界面的方法】
      // if (i == -1) {
      // console.log(i);
      // tab中不存在该目录信息
      this.$store.commit("pushTabPathList", this.$store.state.activePath);
      console.log(path);
      console.log(JSON.parse(JSON.stringify(path)));
      console.log(this.$store.state.activePath);
      // }
      // } else {
      //   this.$message.error("抱歉！最多只能打开15个界面");
      // }
    },

    // 监听【收藏图标】的点击
    async shoucang(item1) {
      let orgId = JSON.parse(sessionStorage.getItem("orgData"));
      // item1.isShowIcon = !item1.isShowIcon;
      let {
        data: res
      } = await this.$http.get("/api/addMenuCollect", {
        params: {
          key: item1.key,
          orgId: orgId.orgType,
        },
      });
      console.log(res);
      if (res.result) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        // item1.collect = !item1.collect; //修改收藏图片的状态
        this.menuItemClick(this.menuItemIndex);
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      this.$emit("shoucangClick");
    },
  },
  watch: {
    // 刷新请求【常用功能】
    "$store.state.activePath": function () {
      if (this.$store.state.activePath == this.$store.state.tabPathList[1]) {
        this.getMenuList();
        if (this.menuItemIndex) {
          // home页面修改了收藏，可以在功能【main页面】实时更新
          this.menuItemClick(this.menuItemIndex);
        }
      }
    },
  },
};
</script>
<style scoped>
.contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.aside {
  width: 200px;
  height: 100%;
  overflow-y: scroll;
  background-color: #e9eaf3;
  border: 1px solid #eee;
  box-sizing: border-box;
  border-left: none;
}

.aside li {
  list-style: none;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  color: #000;
  background-color: #e9eaf3;
  padding: 0 20px;
  font-size: 17px;
  /* font-weight: 700; */
  box-sizing: border-box;
}

.aside .icon-caidan {
  font-weight: 400;
  padding-right: 5px;
  font-size: 18px;
  color: #abb6cd;
}

.aside li:hover {
  /* background-color: #4d4f75; */
  color: blue !important;
}

.actionClass {
  color: blue !important;
  background-color: #fff !important;
  border-left: 4px solid blue;
  box-sizing: border-box;
}

.main-box {
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-color: #fff;
  padding: 0 50px 0 50px;
  box-sizing: border-box;
}

.menu-contain:first-child {
  margin-top: 30px;
}

.menu-contain {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  /* margin: 0 50px 0 50px; */

  flex-direction: column;
}

.menu-header {
  width: 100%;
  height: 50px;
  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 3px solid #eee;
  font-size: 18px;
  font-weight: 600;
}

.menu-box {
  width: 100%;
  color: #515967;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.small-box {
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  margin: 10px 15px;
  /* border: 1px solid #000; */
  background-color: #eaecf2;
  border-radius: 10px;
  position: relative;
}

.small-box .mouseActive {
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-box .shoucangBox {
  position: absolute;
  top: 2px;
  right: 5px;
}

/* 鼠标经过时 文字修改样式 */
.small-box:hover .mouseActive {
  color: blue;
}

/* 鼠标经过图标时显示和隐藏 */
.icon-shoucang {
  display: none;
  /* 默认情况下隐藏 */
}

/* 鼠标经过时 图标的样式 */
.small-box:hover .icon-shoucang {
  display: inline-block;
  color: orange;
  margin-left: 10px;
}

.icon-shoucang1-copy {
  /* 收藏点击后的图标样式 */
  color: orange;
  margin-left: 10px;
}
</style>